<template>
  <div><br/>
    操作步骤：<br/>
    1、点击“选择文件”，选择要上传的文件<br/>
    2、点击“开始上传”，开始上传文件<br/>
    3、如需重新上传请重复上边的步骤。<br/><br/>
    <el-row class="webUploader">
      <el-col :span="24" class="mb20" :style="{ display: 'flex' }">
        <el-button
          class="selectFile"
          :disabled="disabled"
          type="primary"
          size="mini"
          ref="selectFile"
        >
          选择文件
        </el-button>
        <el-button
          @click="submitFile"
          :disabled="disabled"
          type="success"
          size="mini"
        >开始上传</el-button>

      </el-col>
      <el-col :span="24">
        <el-table :data="value" :disabled="disabled" size="mini">
          <el-table-column
            label="文件名"
            align="left"
            key="fileName"
            prop="fileName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="大小"
            align="center"
            key="fileSize"
            prop="fileSize"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="进度"
            align="center"
            key="fileProgress"
            prop="fileProgress"
          >
            <template slot-scope="scope">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="scope.row.fileProgress"
              ></el-progress>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            key="fileStatus"
            prop="fileStatus"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-video-play"
                @click="resume(scope.row.file)"
                :disabled="scope.row.fileStatus === '上传成功'"
              >开始</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-video-pause"
                @click="stop(scope.row.file)"
                :disabled="scope.row.fileStatus === '上传成功'"
              >暂停</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                :disabled="disabled"
                @click="remove(scope.row, scope.$index)"
              >移除</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-video-camera"
                @click="imgLook(scope.row.fileId)"
                :disabled="scope.row.fileStatus !== '上传成功'"
              >预览</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

  </div>


</template>
<script>
// eslint-disable-next-line no-unused-vars
import Vue from 'vue'
// eslint-disable-next-line no-unused-vars
import $ from 'jquery'
import WebUploader from 'webuploader'
export default {
  name: 'uploaderList',
  components: {},
  props: {
    accept: {
      type: [String, Object],
      default: null
    },
    // 上传地址
    url: {
      type: String,
      default: 'http://127.0.0.1:8081/backstage/video/upload'
    },
    // 上传最大数量 默认为100
    fileNumLimit: {
      type: Number,
      default: 100
    },
    // 大小限制 默认2M
    fileSingleSizeLimit: {
      type: Number,
      default: 5120000
    },
    fileType: {
      type: String,
      default: 'knowledge'
    },
    // 上传时传给后端的参数，一般为token，key等
    formData: {
      type: Object,
      default: () => {
        return { guid: null, code: 9 }
      }
    },
    // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
    keyGenerator: {
      type: Function,
      default: () => `${new Date().getTime()}`
    },
    multiple: {
      type: Boolean,
      default: true
    },
    // 上传按钮ID
    uploadButton: {
      type: String,
      default: ''
    },
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      uploader: null,
      statu: '',
      videAddress: null
    }
  },
  watch: {
    disabled (newVal) {
      if (newVal) {
        this.uploader.destroy()
        return false
      }
      this.initWebUpload()
    }
  },
  mounted () {
    if (!this.disabled) {
      this.initWebUpload()
    }
  },
  methods: {
    initWebUpload () {
      if (this.uploader) {
        this.uploader.destroy()
      }
      const uploader = (this.uploader = WebUploader.create({
        auto: false, // 选完文件后，是否自动上传
        // swf: '/static/lib/webuploader/Uploader.swf',  // swf文件路径
        server: this.url, // 文件接收服务端
        pick: {
          id: this.$refs.selectFile.$el, // 选择文件的按钮
          multiple: this.multiple // 是否多文件上传 默认false
        },
        accept: this.getAccept(this.accept), // 允许选择文件格式。
        threads: 3,
        fileNumLimit: this.fileNumLimit, // 限制上传个数
        // fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
        formData: this.formData, // 上传所需参数
        chunked: false, // 分片上传
        chunkSize: 5120000, // 分片大小
        duplicate: true // 重复上传
      }))
      const fun = [
        'fileQueued',
        'uploadStart',
        'uploadProgress',
        'uploadSuccess',
        'error'
      ]
      for (const item of fun) {
        uploader.on(item, this[item])
      }
      return uploader
    },
    // 当有文件被添加进队列的时候，添加到页面预览
    fileQueued (file) {
      const { name, size, id } = file
      const obj = {
        id,
        fileName: name,
        fileSize: WebUploader.Base.formatSize(size),
        fileProgress: 0,
        fileStatus: '待上传',
        file
      }
      this.value.push(obj)
    },
    // 在这里可以准备好formData的数据
    uploadStart () {
      this.uploader.options.formData.guid = this.keyGenerator()
    },
    // 文件上传过程中创建进度条实时显示。
    uploadProgress (file, percentage) {
      // eslint-disable-next-line eqeqeq
      const fileObj = this.value.find(obj => file.id == obj.id)
      fileObj.fileStatus = '上传中'
      fileObj.fileProgress = parseInt(percentage * 100)
      fileObj.file = file
    },
    // 文件上传成功
    async uploadSuccess (file, res) {
      // eslint-disable-next-line eqeqeq
      const fileObj = this.value.find(obj => file.id == obj.id)
      console.log(res)
      if (res.statusCode === 2000) {
        alert('文件上传成功')
        fileObj.fileStatus = '上传成功'
        this.$emit('input', this.value)
        this.videAddress = res.data.url
        this.$http({
          url: this.$http.adornUrl('/backstage/video/setUrl'),
          method: 'get',
          params: this.$http.adornParams({
            'vid': this.$route.query.vid,
            'videoAddress': res.data.url
          })
        }).then(({data}) => {
          if (data.statusCode === 2000) {
            this.$router.push('/showVideos')
          }
        })
      } else {
        fileObj.fileProgress = 0
        fileObj.fileStatus = '上传失败,请点击开始重新上传'
      }
      // try {
      //   // eslint-disable-next-line no-undef
      //   const { data } = await combine({
      //     guid: res.guid,
      //     fileName: file.name,
      //     fileType: this.fileType,
      //     code: res.code
      //   })
      //   fileObj.fileId = data.fileId
      //   fileObj.fileStatus = '上传成功'
      //   this.$emit('input', this.value)
      // } catch (err) {
      //   fileObj.fileProgress = 0
      //   fileObj.fileStatus = '上传失败,请点击开始重新上传'
      // }
    },
    error (type) { // 报错信息
      let errorMessage = ''
      if (type === 'F_EXCEED_SIZE') {
        errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /
        (1024 * 1000)}M`
      } else if (type === 'Q_EXCEED_NUM_LIMIT') {
        errorMessage = '文件上传已达到最大上限数'
      } else {
        errorMessage = `上传出错！请检查后重新上传！错误代码${type}`
      }
      console.error(errorMessage)
    },
    // 开始
    resume (file) {
      this.uploader.upload(file)
    },
    // 暂停
    stop (file) {
      file.fileStatus = '暂停中'
      this.uploader.stop(file)
    },
    // 移除
    async remove (row, idx) {
      const { fileId, file } = row
      try {
        // eslint-disable-next-line no-undef
        if (fileId) await delFileApi(fileId)
        this.value.splice(idx, 1)
        if (file) {
          // 取消并中断文件上传
          this.uploader.cancelFile(file)
          // 在队列中移除文件
          this.uploader.removeFile(file, true)
        }
        this.$emit('input', this.value)
      } catch (error) {}
    },
    // 预览
    imgLook (fileId) {
      if (!fileId) {
        return false
      }
      // eslint-disable-next-line no-undef
      lookImg(fileId).then(res => {
        const sourceImages = []
        sourceImages.push({
          thumbnail:
            process.env.VUE_APP_BASE_API +
            this.profile +
            res.data.thumbnailFile,
          source:
            process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile
        })
        // console.log(sourceImages);
        this.$refs.viewer.show(sourceImages, 0)
      })
    },
    // 上传文件格式
    getAccept (accept) {
      switch (accept) {
        case 'text':
          return {
            title: 'Texts',
            exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt',
            mimeTypes: '.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt'
          }
        case 'video':
          return {
            title: 'Videos',
            exteensions: 'mp4',
            mimeTypes: '.mp4'
          }
        case 'image':
          return {
            title: 'Images',
            exteensions: 'gif,jpg,jpeg,bmp,png,tif',
            mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png,.tif'
          }
        default:
          return accept
      }
    },
    submitFile () {
      this.uploader.upload()
    },
    sendmeazie () {
      this.zt = 2
    }
  }
}
</script>
<style>
.webuploader-container {
  position: relative;
}
.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #00b7ee;
  padding: 10px 15px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}
.webuploader-pick-hover {
  background: #00a2d4;
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events:none;
}
</style>
